import React, { useState, useRef } from 'react';
import cls from 'classnames';
import styles from './index.less';
import { SearchOutlined, CloseSquareOutlined } from '@ant-design/icons';
import { Modal, Button } from 'antd';
import { addProj } from '@/services/modelManageService';

// 项目管理部分
const ModelManageLeft = ({ projList = [], curProj, onCurProjChange }) => {
  const [keyword, setKeyword] = useState('');
  const [isShowAddModal, setIsShowAddModal] = useState(false);

  const nameRef = useRef();
  const codeRef = useRef();

  const handleToggleAddModal = () => setIsShowAddModal(b => !b);

  // 添加项目
  async function handleItemAdd() {
    const name = nameRef.current.value;
    const code = codeRef.current.value;

    try {
      await addProj({ name, code });
      nameRef.current.value = '';
      codeRef.current.value = '';
      onCurProjChange();
      handleToggleAddModal();
    } catch (error) {}
  }

  return (
    <div className={styles.left}>
      <div className={styles.leftSearch}>
        <SearchOutlined></SearchOutlined>
        <input
          placeholder="搜索BIM模型名称"
          onChange={e => setKeyword(e.target.value)}
          type="text"
        />
      </div>
      <div style={{ paddingTop: 24, paddingBottom: 16, paddingLeft: 24,opacity:0.4 }}>所有我的内容</div>
      <ul className={styles.leftList}>
        {!!projList.length &&
          projList
            .filter(e => {
              return e.name.indexOf(keyword) !== -1;
            })
            .map(e => {
              return (
                <li
                  className={cls({ [styles.active]: curProj === e.objectId })}
                  onClick={() => onCurProjChange(e.objectId)}
                  key={e.objectId}
                >
                  {e.name}
                </li>
              );
            })}
      </ul>
      <div className={styles.leftQuit} onClick={handleToggleAddModal} style={{ cursor: 'point' }}>
        新增内容
      </div>

      {/* 添加 */}
      <Modal
        title="增加项目"
        wrapClassName={styles.cModal}
        visible={isShowAddModal}
        onOk={handleItemAdd}
        onCancel={handleToggleAddModal}
        footer={null}
        width={280}
        centered
        closeIcon={<CloseSquareOutlined />}
      >
        <p>项目名称</p>
        <input ref={nameRef} placeholder="请输入项目名称" type="text" />
        <p>项目CODE</p>
        <input ref={codeRef} placeholder="请输入项目code" type="text" />
        <div className="" style={{ textAlign: 'center', paddingBottom: 8 }}>
          <Button className={styles.cButton} key="done" onClick={handleItemAdd}>
            添加
          </Button>
        </div>
      </Modal>
    </div>
  );
};

export default ModelManageLeft;
